<template>
  <el-dialog
    :title="dialogTitle"
    top="10vh"
    :visible.sync="dialogVisible"
    close-on-press-escape
    :before-close="cancel"
    @open="init"
  >
    <div v-loading="loading" class="cost-container" style="padding: 10px;">
      <el-form
        ref="cost"
        :model="cost"
        class="form-container"
        :rules="AddRules"
        label-width="80px"
      >
        <el-form-item label="成本名称" prop="name">
          <el-input v-model="cost.name" />
        </el-form-item>
        <el-form-item label="开销单价" prop="price">
          <el-input v-model="cost.price" />
        </el-form-item>
        <el-form-item label="开销数量" prop="number">
          <el-input v-model="cost.number" />
        </el-form-item>
        <el-form-item label="开销金额" prop="cost">
          <el-input v-model="cost.cost" />
        </el-form-item>
        <el-form-item label="开销时间" prop="costDate">
          <el-date-picker
            v-model="cost.costDate"
            type="date"
            placeholder="选择开销时间"
          />
        </el-form-item>
        <el-form-item label="用途" prop="purpose">
          <el-input v-model="cost.purpose" />
        </el-form-item>
        <el-form-item style="margin-bottom: 0px;">
          <el-button style="float: right;margin-left: 10px;" type="primary" @click="submitForm('cost')">{{ id? '修改':'添加' }}</el-button>
          <el-button style="float:right;" @click="cancel('cost')">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
// import { parseTime } from '@/utils'
import { getCostInfo, addCost, modifyCost } from '@/api/cost'
// import { getEmployeeList, getEmployeeInfo } from '@/api/employee'
import { Message } from 'element-ui'
export default {
  name: 'EmployeeDialog',
  props: {
    dialogVisible: Boolean,
    dialogTitle: {
      type: String,
      default() {
        return ''
      }
    },
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      cost: {
        name: '',
        number: '',
        price: '',
        cost: '',
        costDate: '',
        purpose: ''
      },
      selectLoading: false,
      options: [],
      AddRules: { // 对话框表单验证
        number: [{ required: true, message: '开销数量不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '成本名称不能为空', trigger: 'blur' }],
        price: [{ required: true, message: '开销单价不能为空', trigger: 'blur' }],
        cost: [{ required: true, message: '开销金额不能为空', trigger: 'blur' }],
        costDate: [{ required: true, message: '请选择开销时间', trigger: 'blur' }],
        purpose: [{ required: true, message: '用途不能为空', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    init() {
      if (this.id) {
        this.loading = true
        getCostInfo(this.id).then(res => {
          if (res) {
            this.cost.name = res.data.data.name
            this.cost.number = res.data.data.number
            this.cost.price = res.data.data.price
            this.cost.cost = res.data.data.cost
            this.cost.costDate = res.data.data.costDate
            this.cost.purpose = res.data.data.purpose
            setTimeout(() => {
              this.listLoading = false
            }, 2 * 1000)
          }
          this.loading = false
        })
      }
    },
    // getSelectList() {
    //   this.selectLoading = true
    //   getEmployeeList().then(res => {
    //     if (res) {
    //       const list = res.data.list
    //       const optionList = []
    //       list.forEach(item => {
    //         const obj = {}
    //         obj.value = item.name
    //         obj.id = item.id
    //         optionList.push(obj)
    //       })
    //       this.options = optionList
    //       setTimeout(() => {
    //         this.selectLoading = false
    //       }, 2 * 1000)
    //     }
    //     this.selectLoading = false
    //   })
    // },
    // getEmployeeInfo(payload) {
    //   getEmployeeInfo(payload.id).then(res => {
    //     if (res) {
    //       this.cost.employeeId = payload.id
    //       this.cost.employeeType = res.data.data.type
    //       this.cost.baseWage = res.data.data.baseWage
    //     }
    //   })
    // },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.id) {
            modifyCost(this.id, this.cost).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.cancel()
              }
            })
            this.$emit('getTable')
          } else {
            // this.cost.name = this.cost.name.value
            addCost(this.cost).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.$refs[formName].resetFields()
                this.$emit('closeDialog')
              }
            })
            this.$emit('getTable')
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.$emit('closeDialog')
      this.$refs.cost.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog {
  height: 478px;
  width: 40%;
}
::v-deep .el-dialog__body {
  overflow-y: auto;
  height: 425px;
  padding: 0;
}
.el-form-item{
  margin-bottom: 20px;
}
</style>
